<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>会员注册</title>
	<link type="text/css" th:href="@{/html/css/bootstrap.min.css}" rel="stylesheet" />
	<script type="text/javascript" th:src="@{/html/js/jquery-1.12.4.js}"></script>
	<script type="text/javascript">

		$(function(){	
			$("button[type='submit']").click(function(){
				var username = document.getElementById("username");
				
				if(username.validity.valueMissing){
		        	username.setCustomValidity("用户名不能为空");
		       	}else if(username.validity.patternMismatch){
		           	username.setCustomValidity("用户名必须由五至二十位数字或字母(开头)组合");
		        }else{
		            username.setCustomValidity("");
		       	}
				
				var password = document.getElementById("password");
	            if(password.validity.valueMissing){
	            	password.setCustomValidity("密码不能为空");
	            }else if(6 > password.value.length){
	            	password.setCustomValidity("密码不能少于六位");
	            }else{
	            	password.setCustomValidity("");
	            }
	            
	            var confirmpassword = document.getElementById("confirmpassword");
	            if(confirmpassword.validity.valueMissing){
	            	confirmpassword.setCustomValidity("确认密码不能为空");
	            }else if(password.value!=confirmpassword.value){
	            	confirmpassword.setCustomValidity("两次密码输入不一致");
	            }else{
	            	confirmpassword.setCustomValidity("");
	            }
				
			});
			
		});
	</script>
</head>
<body>
	<div class="container" style="margin-top: 100px">
		<form class="form-horizontal col-md-8 col-md-offset-2" th:action="@{/regist/cust}" method="post">
            <legend>注册会员</legend>
            <div class="form-group">
                <label class="col-md-2 control-label">用户名:</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" maxlength="20" id="username" name="username" pattern="^\w{5,20}$" required="required" placeholder="请输入用户名"  />
                </div>
                <div class="col-md-6 help-block">用户不能为空</div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">密码:</label>
                <div class="col-md-4">
                    <input type="password" class="form-control"  maxlength="20" id="password" name="password" required="required" placeholder="请输入密码"  />
                </div>
                <div class="col-md-6 help-block">密码不能为空</div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">确认密码:</label>
                <div class="col-md-4">
                    <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" required="required" placeholder="请输入密码"  />
                </div>
                <div class="col-md-6 help-block">两次密码保证一致</div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-2">
                    <button type="submit" class="btn">注册</button>
                    <button type="reset" class="btn">取消</button>
                    <a th:href="@{/}">返回首页</a>
                </div>
                <div class="col-md-6 help-block" th:text="${message}"></div>
            </div>
        </form>
    </div>
</body>
</html>